<template>
  <el-row :gutter="16">
    <el-col :span="5">
      <div class="box">
        <div class="change">
          <el-select v-model="tsValue" filterable placeholder="请选择">
            <el-option v-for="(item, index) in options"
                       :key="index"
                       :value="item.mdCode"
                       :label="item.mdName">
            </el-option>
          </el-select>
          <img class="md-add select-add" :src="require('@/assets/icon/md-add.svg')" @click="addSelect('top')"/>
        </div>
        <el-table
          :data="leftData"
          :show-header="false"
          :border="false">
          <el-table-column>
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.dictLabel }}</span>
              <img class="md-add" :src="require('@/assets/icon/md-add.svg')" @click="addSelect(scope.row)"/>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-col>
    <el-col :span="19">
      <div class="table-list">
        <el-form :inline="true" :model="faForm" class="form-mc" :rules="rules" ref="faForm">
          <el-form-item label="方案名称:" prop="fam">
            <el-input v-model="faForm.fam" maxlength="30" show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="格式预览:" style="margin-left:50px">{{gsyl}}</el-form-item>
        </el-form>
        <el-button type="primary" size="small" :loading="btnLoading" class="gs-save" @click="saveDh">保存</el-button>
        <avue-crud :option="optionAdd" :data="addData">
          <template slot="separator" slot-scope="{row}">
            <el-input v-model="row.separator" placeholder="" @input="getgsyl" style="width:130px"></el-input>
          </template>
          <template slot="length" slot-scope="{row}">
            <el-input v-model="row.length" placeholder="" @input="getgsyl" style="width:130px"></el-input>
          </template>
          <template slot-scope="row" slot="menu">
            <img :src="require('@/assets/icon/md-up.svg')" @click="upData(row)"/>
            <img class="is-rotate" :src="require('@/assets/icon/md-up.svg')" @click="downData(row)"/>
            <img :src="require('@/assets/icon/md-remove.svg')" @click="delData(row)"/>
          </template>
        </avue-crud>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import { addReferenceDic, editReferenceDic } from '../../../../../api/reference/reference'

export default {
  name: 'addProgramme', // 新增方案
  props: {
    idCategory: {
      type: String,
      default: ''
    },
    tableId: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'add'
    },
    editData: {
      type: Object,
      default: () => ({})
    },
    options: {
      type: Array,
      default: () => ([])
    },
    leftData: {
      type: Array,
      default: () => ([])
    }

  },
  data () {
    return {
      faForm: {
        fam: ''
      },
      rules: {
        fam: [
          {
            required: true,
            message: '请输入方案名',
            trigger: 'blur'
          }
        ]
      },
      gsyl: '',
      optionAdd: {
        al: 'center',
        addBtn: false,
        height: 'calc(100vh - 260px)',
        border: true,
        refreshBtn: false,
        columnBtn: false,
        reserveSelection: true,
        editBtn: false,
        delBtn: false,
        index: true,
        indexLabel: '序号',
        indexWidth: 65,
        menuWidth: 180,
        column: [
          {
            label: '字段名',
            prop: 'column'
          },
          {
            label: '名称',
            prop: 'name'
          },
          {
            label: '链接符',
            prop: 'separator',
            slot: true,
            width: 180
          },
          {
            label: '补位长度',
            prop: 'length',
            slot: true,
            width: 180
          }
        ]
      },
      addData: [],
      tsValue: '',
      btnLoading: false
    }
  },
  mounted () {
    this.setEditData()
  },
  watch: {
    editData () {
      this.setEditData()
    }
  },
  methods: {
    setEditData () {
      this.faForm.fam = this.editData.fmtName
      this.gsyl = this.editData.fmtPerview
      this.addData = this.editData.fmtJson ? JSON.parse(this.editData.fmtJson) : []
    },
    addSelect (row) {
      let rowData = {}
      if (row === 'top') {
        this.options.map(item => {
          if (item.mdCode === this.tsValue) {
            rowData = item
          }
        })
      } else {
        rowData = row
      }
      const param = {}
      param.column = rowData.mdCode || rowData.dictValue
      param.name = rowData.mdName || rowData.dictLabel
      param.separator = '-'
      param.length = '0'
      this.addData.push(param)
      this.getgsyl()
    },
    getgsyl () {
      let yl = ''
      for (const data of this.addData) {
        yl = yl + data.name + data.separator
        if (data.length !== '0') {
          yl = yl + '(' + data.length + ')'
        }
      }
      this.gsyl = yl
    },
    zlData (arrayData) {
      for (const i in arrayData) {
        arrayData[i].$index = i
      }
      arrayData.sort()
      this.addData = arrayData
      this.getgsyl()
    },
    upData (row) {
      const current = row.index
      const arrayData = this.addData
      const ln = arrayData.length
      if (current > 0 && current < ln) {
        const temp = arrayData[current]
        const temp1 = arrayData[current - 1]
        arrayData[current - 1] = temp
        arrayData[current] = temp1
      }
      this.zlData(arrayData)
    },
    downData (row) {
      const current = row.index
      const arrayData = this.addData
      const ln = arrayData.length
      if (current < ln - 1) {
        const temp = arrayData[current]
        const temp1 = arrayData[current + 1]
        arrayData[current + 1] = temp
        arrayData[current] = temp1
      }
      this.zlData(arrayData)
    },
    delData (row) {
      const current = row.index
      const arrayData = this.addData
      arrayData.splice(current, 1)
      this.zlData(arrayData)
    },
    saveDh () {
      if (this.gsyl === '') {
        this.$message({
          showClose: true,
          type: 'error',
          message: '未设置档号格式!'
        })
      } else if (this.faForm.fam === '') {
        this.$message({
          showClose: true,
          type: 'error',
          message: '请输入方案名称!'
        })
      } else {
        this.$refs.faForm.validate((valid) => {
          if (valid) {
            this.btnLoading = true
            var param = {}
            param.fmtName = this.faForm.fam
            param.fmtPerview = this.gsyl
            param.fmtJson = JSON.stringify(this.addData)
            param.idCategory = this.idCategory
            if (this.type === 'edit') {
              param.id = this.editData.id
              param.isDefault = this.editData.isDefault
            } else {
              param.isDefault = false
              delete param.id
            }
            const requestData = this.type === 'edit' ? editReferenceDic(param) : addReferenceDic(param)
            requestData.then((res) => {
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
              this.btnLoading = false
              this.addData = []
              this.$emit('handleSuccess')
            }).catch(() => {
              this.btnLoading = false
            })
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .form-mc {
    position: absolute;
    z-index: 2;
  }

  ::v-deep .avue-crud__menu {
    top: 5px
  }

  .change {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  img {
    margin: 0px 10px;
    border: 1px solid;
    border-radius: 50%;
    cursor: pointer;

    &:hover {
      background-color: rgb(245, 247, 250);
    }
  }

  .el-input {
    width: 220px;
  }

  .md-add {
    position: relative;
    float: right;

    &:hover {
      background-color: rgb(245, 247, 250);
    }
  }

  .el-select {
    width: 170px;
  }

  .gs-save {
    position: relative;
    float: right;
    right: 1px;
  }

  .is-rotate {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
  }

</style>
